<script>
export default {
  name: "brandCase",
  data() {
    return {
      carList: [
        {
          id: 1,
          carName: '奔驰',
          cTime: new Date()
        },
        {
          id: 2,
          carName: '宝马',
          cTime: new Date()
        }
      ],
      carId: '',
      carName: '',
      searchKey: "",
      delActive:'',
      modifyActive:'',
      oldVal:'',
      newVal:'',
    }
  },
  methods: {
    add() {
      // console.log(this.carId)
      // console.log(this.carName)
      let obj = {
        id: this.carId,
        carName: this.carName,
        cTime: new Date()
      }
      if (this.carList.some(item => item.id === this.carId)) {
        alert('id重复')
      } else {
        this.carList.push(obj)
      }
    },


    //   搜索
    keySearch() {
      // console.log(this.searchKey)
      // console.log(item.carName.includes(this.searchKey))
      return this.carList.filter((item) => {
        return item.carName.includes(this.searchKey)
      })
    },
    del(item) {
      console.log(item)
      // console.log()
      this.carList.splice(this.carList.indexOf(item), 1)
      console.log(this.carList.indexOf(item))
      this.delActive = this.carList.indexOf(item)
      // this.carList.splice(this.carList.indexOf(item), 1)
    },
    confirmTheDeletion(){
      this.carList.splice(this.delActive, 1)
    },
    //   修改
    modify(item) {
      console.log(this.carList.indexOf(item))
      this.modifyActive = this.carList.indexOf(item)
      this.oldVal = this.carList[this.modifyActive].carName
    },
    confirmTheChanges(){
      console.log(this.newVal)
      this.carList[this.modifyActive].carName = this.newVal
    }
  }
}
</script>

<template>
  <div class="container">
    <div></div>
    <div class="card">
      <div class="card-header">头部</div>
      <div class="card-body">
        <form class="form-inline">
          <label for="email">id:</label>
          <input type="text" class="form-control" id="email" v-model="carId">
          <label for="pwd">name:</label>
          <input type="text" class="form-control" id="pwd" v-model="carName">
          <button type="button" class="btn btn-primary" @click="add">添加</button>
          <label for="search">搜索关键字:</label>
          <input type="text" class="form-control" id="search">
          <input @input="keySearch" type="text" class="form-control" id="search" v-model="searchKey">
        </form>
        <table class="table">
          <thead>
          <tr>
            <th>id</th>
            <th>name</th>
            <th>Ctime</th>
            <th>operation</th>
          </tr>
          </thead>
          <tbody>
<!--          <tr v-for="(item) in carList" :key="item.id">-->
            <tr v-for="(item) in  keySearch()" :key="item.id">
              <td>{{ item.id }}</td>
              <td>{{ item.carName }}</td>
              <td>{{ item.cTime }}</td>
              <td>
                <button class="btn btn-primary" @click="del(item)">删除</button>
                <button class="btn btn-primary" @click="del(item)" data-toggle="modal" data-target="#myModal1">删除</button>
                <button class="btn btn-primary" @click="modify(item)" data-toggle="modal" data-target="#myModal">修改</button>
              </td>
              <!-- 模态框 -->



            </tr>
          </tbody>
        </table>
        <div class="modal fade" id="myModal">
          <div class="modal-dialog">
            <div class="modal-content">

              <!-- 模态框头部 -->
              <div class="modal-header">
                <h4 class="modal-title">模态框头部</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
              </div>

              <!-- 模态框主体 -->
              <div class="modal-body">
                原来的值：<input type="text" v-model="oldVal">
                修改的值：<input type="text" v-model="newVal">
              </div>

              <!-- 模态框底部 -->
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal" @click="confirmTheChanges">确认</button>

                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
              </div>

            </div>
          </div>
        </div>
        <div class="modal fade" id="myModal1">
          <div class="modal-dialog">
            <div class="modal-content">

              <!-- 模态框头部 -->
              <div class="modal-header">
                <h4 class="modal-title">模态框头部</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
              </div>

              <!-- 模态框主体 -->
              <div class="modal-body">
                是否删除
              </div>

              <!-- 模态框底部 -->
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal" @click="confirmTheDeletion">确认</button>

                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
              </div>

            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<style scoped lang="less">

</style>